import * as echarts from 'echarts';
export const dashboard = {
  mounted() {
    this.options = echarts.init(this.$refs.options);
    this.orderOptions = {
      tooltip: {
        trigger: 'item'
      },

      color: ["#FB7171", "#6579D7", "#F6C95D"],
      legend: {
        orient: 'vertical',
        left: '50%',
        top: "30%"
      },
      series: [
        {
          name: '订单统计',
          center: ['25%', '50%'],
          type: 'pie',
          radius: '90%',
          data: this.orderCount,
          label: {
            normal: {
              show: false
            },
          },
          labelLine: {
            normal: {
              show: false
            }
          },
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    }
    this.options2 = echarts.init(this.$refs.options2)

    this.rescueOptions = {
      color: ['#FB7171', '#FBDD65'],
      tooltip: {
        trigger: 'item'
      },
      legend: {
        top: '45%',
        left: '50%',
        orient: 'vertical'
      },
      series: [
        {
          name: '救援统计任务',
          type: 'pie',
          radius: ['65%', '90%'],
          center: ['25%', '50%'],
          avoidLabelOverlap: false,
          label: {
            show: false,
            position: 'center'
          },
          labelLine: {
            show: false
          },
          startAngle: 10,
          data: [
            { value: 2248, name: '已处理' },
            { value: 735, name: '待处理' }
          ]
        }
      ],

    }

    this.options3 = echarts.init(this.$refs.options3)
    this.userOptions = {
      color: new echarts.graphic.LinearGradient(
        0, 0, 0, 1,
        [
          { offset: 0, color: "#00fffb" },
          { offset: 1, color: "#0061ce" },
        ]
      ),
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      grid: {
        top: "3%",
        bottom: "10%",
        right: "55%"
      },
      xAxis: {
        type: 'category',
        data: this.userCount.userX,
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: this.userCount.userY,
          type: 'bar'
        }
      ]
    }
  },
  watch: {
    timeArr() {
      if (!this.timeArr) {
        this.timeArr = [];
      }
    },
    orderCount(n) {
      this.orderOptions.series[0].data = n;
      this.options.setOption(this.orderOptions);
    },
    rescueCount(n) {
      this.rescueOptions.series[0].data = n;
      this.options2.setOption(this.rescueOptions);
    },
    userCount:{
      deep: true,
      handler(n){
        
        this.userOptions.xAxis.data = n.userX;
        this.userOptions.series[0].data = n.userY;
        this.options3.setOption(this.userOptions);
      }
    }
  },
  computed: {
    starttime() {
      if (this.timeArr.length > 0) {
        return this.timeArr[0]
      } else {
        return '';
      }
    },
    endtime() {
      if (this.timeArr.length > 0) {
        return this.timeArr[1]
      } else {
        return '';
      }
    },
  },
}